<template>
  <!--  标签管理-->
  <div class="tags">
    <!--  左侧标签栏  -->
    <div class="tags-left">
      <!--      顶部提示-->
      <div class="top">
        <span>标签组</span>
        <div class="addtags" @click.prevent.stop="addtags">
          <img src="../assets/images/add@2x.png" alt="" />
        </div>
      </div>
      <!--   标签组主体内容   -->
      <div class="main">
        <div
          class="tags-list"
          v-for="(item, index) in tagsList"
          :key="index"
          :class="[
            item.default == false ? 'tags-active' : '',
            isreame == index ? 'tags-rename' : '',
            isactive == index ? 'tags-rename' : '',
          ]"
          @contextmenu.prevent="operate(index)"
          @click.prevent.stop.self="showtags(index)"
        >
          <!--          标签名-->
          <div class="slot flex-center">
            <!--            圆圈图标-->
            <div class="circle"></div>
            <!--            标签组名-->
            <div class="name" v-show="isreame != index">{{ item.name }}</div>
            <!--            重命名操作后的标签组-->

            <div v-show="isreame == index" class="input">
              <el-input
                v-model="item.name"
                :placeholder="item.placeholder"
                @keyup.enter.native="creat(index)"
                ref="inp"
                maxlength="200"
              ></el-input>
            </div>
          </div>
          <!--          操作弹窗-->
          <div class="operate" v-show="rightactive == index">
            <div class="rename" @click.prevent.stop="rename(index)">重命名</div>
            <div class="del" @click.prevent.stop="del(index)">删除</div>
          </div>
          <!--          数量-->
          <!-- <div class="number">{{ item.categoryTypeList.length }}</div> -->
        </div>
      </div>
    </div>
    <div class="tags-right">
      <div class="labelone">
        <p>{{ title }}</p>
        <i class="el-icon-plus" @click="tianjia"></i>
      </div>
      <!--       右侧查询框     -->
      <div class="seakuang" v-show="this.tian == true">
        <!--    搜索框        -->
        <div class="seainp">
          <img src="../assets/images/sousuo.png" alt="" />
          <input
            maxlength="100"
            type="text"
            v-model="catename"
            @keyup.enter="add"
          />
        </div>
        <!--                <div class="numb" v-for="(item,index) in labellist" :key="index">-->
        <!--                    <p @click="biao(item.categoryName)">{{item.categoryName}}</p>-->
        <!--                </div>-->
        <div class="numb" v-show="this.visable">
          <ul class="list">
            <li
              v-for="(item, index) in tagSearchList"
              :key="index"
              @click="addTag(item.categoryName)"
            >
              {{ item.categoryName }}
            </li>
            <li v-show="this.showSearch" @click="addtag()">{{ catename }}</li>
          </ul>
        </div>
      </div>
      <div class="label-group">
        <!-- <tagsGroup :tags="labellist" :showTagsArr="showTagsArr"></tagsGroup> -->
        <tagsGroup :showTagsArr="showTagsArr"></tagsGroup>
        <!--                <tagsGroup></tagsGroup>-->
      </div>
    </div>
  </div>
</template>

<script>
import tagsGroup from "../components/common/tagsGroup";
const tags = [
  // {
  //   //标签名
  //   name: "一类标签组",
  //   placeholder: "一类标签组",
  //   //数量
  //   number: "3",
  //   //是否默认
  //   default: true,
  //   taglist: [
  //     {
  //       id: 1,
  //       categoryName: "标签1",
  //     },
  //     {
  //       id: 2,
  //       categoryName: "标签2",
  //     },
  //     {
  //       id: 3,
  //       categoryName: "标签3",
  //     },
  //   ],
  // },
  // {
  //   //标签名
  //   name: "二类标签组",
  //   placeholder: "二类标签组",
  //   //数量
  //   number: "3",
  //   //是否默认
  //   default: true,
  //   taglist: [
  //     {
  //       id: 1,
  //       categoryName: "标签1",
  //     },
  //     {
  //       id: 2,
  //       categoryName: "标签2",
  //     },
  //     {
  //       id: 3,
  //       categoryName: "标签3",
  //     },
  //   ],
  // },
  // {
  //   //标签名
  //   name: "A类标签组",
  //   placeholder: "A类标签组",
  //   //数量
  //   number: "0",
  //   //是否默认
  //   default: false,
  //   taglist: [
  //     {
  //       id: 1,
  //       categoryName: "标签1",
  //     },
  //     {
  //       id: 2,
  //       categoryName: "标签2",
  //     },
  //     {
  //       id: 3,
  //       categoryName: "标签3",
  //     },
  //   ],
  // },
  // {
  //   //标签名
  //   name: "三类标签组",
  //   placeholder: "三类标签组",
  //   //数量
  //   number: "0",
  //   //是否默认
  //   default: true,
  //   taglist: [
  //     {
  //       id: 1,
  //       categoryName: "标签1",
  //     },
  //     {
  //       id: 2,
  //       categoryName: "标签2",
  //     },
  //     {
  //       id: 3,
  //       categoryName: "标签3",
  //     },
  //   ],
  // },
  // {
  //   //标签名
  //   name: "四类标签组",
  //   placeholder: "四类标签组",
  //   //数量
  //   number: "3",
  //   //是否默认
  //   default: true,
  //   taglist: [
  //     {
  //       id: 1,
  //       categoryName: "标签1",
  //     },
  //     {
  //       id: 2,
  //       categoryName: "标签2",
  //     },
  //     {
  //       id: 3,
  //       categoryName: "标签3",
  //     },
  //   ],
  // },
];
export default {
  components: { tagsGroup },
  data() {
    return {
      visable: false,
      tags,
      tagsList: [],
      title: "",
      tian: false,
      catename: "",
      //左侧鼠标单击
      isactive: 0,
      //鼠标右击
      rightactive: -1,
      //重命名
      isreame: -1,
      labellist: [],
      showTagsArr: [],
      clickId: "",
      key: 1,
      showSearch: true,
      tagSearchList: [],
    };
  },
  methods: {
    //
    // reclose(){
    //
    //     this.rightactive=-1;
    //     this.isreame=-1;
    // },
    //搜索图标
    seainp() {
      this.tian = false;
    },
    //鼠标右击打开操作弹窗
    operate(index) {
      this.isreame = -1;
      this.rightactive = index;
      this.isactive = index;
    },
    //显示标签
    showtags(index) {
      if (!this.tagsList[index].rename) {
        this.labellist = this.tagsList[index].taglist;
        // this.showTagsArr = [1, 2];

        this.title = this.tagsList[index].name;
        this.clickId = this.tagsList[index].id;
        this.showTagsArr = [];
        for (let i = 0; i < this.tagsList.length; i++) {
          if (this.tagsList[i].id === this.clickId) {
            for (let j = 0; j < this.tagsList[i].categoryTypeList.length; j++) {
              this.showTagsArr.push(this.tagsList[i].categoryTypeList[j].id);
            }
          }
        }
        this.findByGroupIdQuery(this.clickId);
        console.log(this.showTagsArr);
      }
      this.isactive = index;
      this.rightactive = -1;
    },
    //  重命名
    rename(index) {
      this.rightactive = -1;
      this.key = 2;
      if (!this.tagsList[index].default) {
        // this.tagsList[index].name = "";

        console.log(this.tagsList[index].name);
        this.isreame = index;
      } else {
        this.isreame = -1;
        console.log(this.tagsList[index].name);
      }
    },
    //  删除
    del(index) {
      this.rightactive = -1;
      // this.tagsList[index].opshow=false;
      if (!this.tagsList[index].default) {
        this.$api.deleteTags({ id: this.tagsList[index].id }).then((res) => {
          this.$message({
            message: res.msg,
            type: "success",
            showClose: true
          }).then(() => {
            this.$api.categoryAndGroup().then((res) => {
              this.tagsList = res;
              this.title = res[0].name;
              this.clickId = res[0].id;
            });
          });
        });
        // this.tagsList.splice(index, 1);
        this.key = 3;
        console.log(index);
      }
    },
    //  新建标签组
    addtags() {
      this.rightactive = -1;
      const item = {
        //标签名
        name: "",
        placeholder: "新建标签组",
        //数量
        number: "0",
        //是否默认
        default: false,
        taglist: [],
      };
      this.tagsList.unshift(item);
      this.isreame = this.tagsList.length - 1;
      this.key = 1;
      // console.log(this.isreame)
    },

    //   新建标签组完成
    creat(index) {
      if (this.tagsList[index].name !== "") {
        this.isreame = -1;
        console.log(this.tagsList[index].name);
        // 新增标签组
        if (this.key === 1) {
          this.$api
            .addTags({
              isInherent: 0,
              name: this.tagsList[index].name,
            })
            .then(() => {
              this.$api.categoryAndGroup().then((res) => {
                this.tagsList = res;
              });
            });
        }
        // 重命名
        else if (this.key === 2) {
          this.$api
            .updateTags({
              id: this.clickId,
              isInherent: 0,
              name: this.tagsList[index].name,
            })
            .then(() => {
              this.$api.categoryAndGroup().then((res) => {
                this.tagsList = res;
              });
            });
        }
      } else {
        this.showSearch = true;
        return false;
      }

      // this.title=this.tagsList[index].name;
    },
    reload() {
      location.reload();
    },
    //   右侧加号添加
    tianjia() {
      if (this.tian == false) {
        this.tian = true;
        this.visable = true;
      } else {
        this.tian = false;
        this.visable = false;
      }
    },
    biao(categoryName) {
      this.catename = categoryName;
      console.log(1);
    },
    //重排标签组
    reset() {
      var defaultlist = [];
      var addlist = [];
      for (var i = 0; i < this.tags.length; i++) {
        if (tags[i].default) {
          defaultlist.push(tags[i]);
        } else {
          addlist.push(tags[i]);
        }
      }
      this.tagsList = defaultlist.concat(addlist);
    },
    //右侧搜索框回车添加，搜索框消失
    add() {
      // this.showSearch = true;
      if (this.catename !== "") {
        this.searchTags();
      } else {
        this.$api
          .searchTags({
            categoryName: this.catename,
          })
          .then((res) => {
            console.log(res);
            this.showSearch = res;
          });
      }
    },
    addTag(e) {
      console.log(e);
      this.$api
        .addTagCat({
          categoryName: e,
          groupId: this.clickId,
          name: e,
        })
        .then((res) => {
          console.log("添加成功", res);
          // location.reload()
          this.$api.findByGroupIdQuery(this.clickId).then((res) => {
            console.log(res);
            location.reload();
            /* this.showTagsArr = [];
            for (let i = 0; i < this.res.length; i++) {
              this.showTagsArr.push(res[i]);
            }
            this.showTagsArr.push(res.id);
            this.tagSearchList = res;
            for (let i = 0; i < res.length; i++) {
              this.showTagsArr.push(res[i].id);
            } */
          });
          /* this.$api.categoryAndGroup().then((res) => {
            this.tagsList = res;
          }); */
          this.visable = false;
          this.tian = false;

          /* location.reload();
          this.categoryAndGroup(); */
        });
    },
    addtag() {
      console.log(this.catename);
      this.$api
        .addTagCat({
          categoryName: this.catename,
          groupId: this.clickId,
          name: this.catename,
        })
        .then((res) => {
          console.log("添加成功", res);
          // this.findByGroupIdQuery(this.clickId);
          this.$api.findByGroupIdQuery(this.clickId).then((res) => {
            console.log(res);
            location.reload();
            /* // this.showTagsArr = [];
            for (let i = 0; i < res.length; i++) {
              this.showTagsArr.push(res[i].id);
            } */
          });
          this.visable = false;
          this.tian = false;
          // this.categoryAndGroup();
        });
    },
    // 接口
    /* 新增标签
    async newCategory() {
      let data = await this.$api.addTagCat({
        categoryName: "哈哈",
        firstLetter: "a",
        groupId: 10,
      });
      console.log(data);
    }, */
    // 根据id删除标签  成功
    async delId() {
      let data = await this.$api.delTag(3);
      console.log(data);
    },
    // 查询所有的标签-按照标签首字母分组   成功
    async findAll() {
      let data = await this.$api.findAllGroupByCateGory();
      console.log(data);
    },
    // 查询所有的固有标签  成功
    async findAllGu() {
      let data = await this.$api.findInherentCateGory();
      console.log(data);
    },
    // 根据id查询标签  成功
    async getTag() {
      console.log(await this.$api.getTag(5));
    },
    // 查询标签组及其下标签  成功
    async categoryAndGroup() {
      let data = await this.$api.categoryAndGroup();
      console.log(data);
      this.tagsList = data;
      this.title = data[0].name;
      this.clickId = data[0].id;
      for (let i = 0; i < data[0].categoryTypeList.length; i++) {
        this.showTagsArr.push(data[0].categoryTypeList[i].id);
      }
      for (let i = 0; i < this.tagsList.length; i++) {
        if (this.tagsList[i].categoryTypeList.length != 0) {
          for (let j = 0; j < this.tagsList[0].categoryTypeList.length; j++) {
            this.labellist.push(
              this.tagsList[i].categoryTypeList[j].categoryName
            );
          }
        }
      }
      console.log(this.labellist);
    },
    // 查询所有标签
    async findAllCateGory() {
      let data = await this.$api.findAllCateGory();
      console.log(data);

      for (let i = 0; i < data.length; i++) {
        // this.showTagsArr[i] = data[i];
      }
    },
    // 查询相同groupId标签  成功
    async findByGroupIdQuery(id) {
      let data = await this.$api.findByGroupIdQuery(id);
      console.log(data);
      for (let i = 0; i < data.length; i++) {
        this.showTagsArr.push(data[i].id);
      }
      this.tagSearchList = data;
    },
    //  接口

    //根据标签名词模糊查询标签 成功
    async searchTags() {
      let data = await this.$api.searchTags({
        categoryName: this.catename,
      });
      console.log(data);
      this.labellist = data;
      this.tagSearchList = data;
    },
    //  更新标签 失败 400
    // async updateTag() {
    //   let data = await this.$api.updateTagCategory({
    //     categoryName: "军事1",
    //     // "createDate": "2021-02-04T09:40:41.488Z",
    //     firstLetter: "J",
    //     groupId: 3,
    //     id: 16,
    //     // "updateDate": "2021-02-04T09:40:41.488Z"
    //   });
    //   console.log(data);
    // },
    // //新增标签组  成功
    // async addTags() {
    //   let data = await this.$api.addTags({
    //     isInherent: 0,
    //     name: "string",
    //   });
    //   console.log(data);
    // },
    //根据id删除标签组
    async deleteTags() {
      let data = await this.$api.deleteTags(0);
      console.log(data);
    },
    //查询所有的标签组  成功
    async findAllTags() {
      let data = await this.$api.findAllTags();
      console.log(data);
      // this.tagsList = data;
    },
    //更新标签组  成功
    //   async updateTags() {
    //     let data = await this.$api.updateTags({
    //       id: 0,
    //       isInherent: 0,
    //       name: "string",
    //     });
    //     console.log(data);
    //   },
  },
  updated() {
    // if (this.catename != "") {
    //   this.visable = true;
    // }
    console.log(this.showTagsArr);
  },
  created() {
    this.delId();
    // this.newCategory();
    this.findAll();
    this.getTag();
    this.categoryAndGroup();

    //接口
    this.searchTags();
    this.updateTag();
    // this.addTags();
    // this.deleteTags();
    this.findAllTags();
    this.findAllCateGory();
    // this.updateTags();

    this.title = this.tags[0].name;
    // this.labellist = this.tags[0].taglist;
    // this.showTagsArr = [1, 2];
    this.reset();
    console.log(this.title);

    // 标签列表
  },
};
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";
.input .el-input__inner {
  width: 1.7rem;
  height: 0.3rem;
  background: #a0a0a0;
  border: none;
  padding: 0.06rem 0.13rem;
}

.tags {
  .tags-left {
    width: 2.87rem;
    position: fixed;
    left: 0;
    bottom: 0;
    height: calc(100vh - 0.76rem);
    background: #404040;

    .top {
      padding: 0 0.21rem 0 0.28rem;
      height: 0.6rem;
      justify-content: space-between;
      align-items: center;
      display: flex;
      font-size: 0.24rem;
      font-family: Alibaba PuHuiTi;
      font-weight: 400;
      color: #c6c5c5;
      margin-bottom: 0.23rem;

      .addtags {
        width: 0.25rem;
        height: 0.25rem;
        border: 1px dashed #ffffff;
        cursor: pointer;
        > img {
          width: 0.23rem;
        }
      }
    }

    .main {
      @include scrollBar;
      height: calc(100vh - 2rem);
      overflow-y: auto;
      padding: 0 0.1rem;
      font-size: 0.18rem;
      font-family: Alibaba PuHuiTi;
      font-weight: 400;
      color: #959595;
      .tags-list {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        cursor: pointer;
        margin-bottom: 0.04rem;
        height: 0.4rem;
        .slot {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .circle {
            width: 0.1rem;
            height: 0.1rem;
            border-radius: 50%;
            background-color: #959595;
            margin-right: 0.15rem;
            margin-left: 0.17rem;
          }
        }

        .number {
          margin-right: 0.17rem;
        }

        .operate {
          width: 1.08rem;
          /*height: 0.74rem;*/
          position: absolute;
          z-index: 122;
          top: 0.2rem;
          right: 0.25rem;
          padding: 0.16rem;
          box-shadow: 0px 0px 0.1rem #000;
          background: rgba(98, 98, 98, 0.79);
          /*background-color: red;*/
          border-radius: 0.04rem;

          .rename {
            color: #ffffff;
            margin-bottom: 0.16rem;
            cursor: pointer;
          }

          .del {
            color: #ffffff;
            cursor: pointer;
          }
        }
      }

      .tags-active {
        color: #ffffff;

        .slot {
          .circle {
            background-color: #ffffff;
          }
        }
      }

      .tags-rename {
        background: #626262;
        border-radius: 0.03rem;
      }
    }
  }
}

/*    右侧部分*/
.tags-right {
  padding-top: 0.835rem;
  padding-left: 0.6625rem;

  .label-group {
    padding: 0.38rem 0;
  }
}

.labelone {
  font-size: 24px;
  font-family: Alibaba PuHuiTi;
  font-weight: 400;
  color: #ffffff;
  display: flex;
  align-items: center;
  position: relative;

  .el-icon-plus {
    margin-left: 0.375rem;
    cursor: pointer;
  }
}

/*   右侧搜索框*/
.seakuang {
  width: 4.38rem;
  /*min-height: 1.45rem;*/
  background: #474747;
  box-shadow: 0px 0px 38px 0px rgba(0, 0, 0, 0.45);
  border-radius: 5px;
  position: absolute;
  top: 1.6rem;
  left: 5.82rem;
  z-index: 100;
}

.seainp {
  width: 4.05rem;
  height: 0.38rem;
  background: #383838;
  border-radius: 5px;
  margin: 0.2rem auto;
  display: flex;
  align-items: center;

  img {
    width: 0.19rem;
    height: 0.19rem;
    margin-left: 0.137rem;
    /*cursor: pointer;*/
  }

  input {
    margin-left: 0.137rem;
    font-size: 0.16rem;
    color: white;
  }
}

.numb {
  .list {
    max-height: 2rem;
    overflow: auto;
    li {
      padding: 0.06rem 0.2rem;
      color: #ffffff;
      cursor: pointer;
    }
  }
  p {
    margin-bottom: 0.2rem;
    font-size: 0.16rem;
    color: #ffffff;
    border-radius: 5px;
    padding-left: 0.537rem;
    padding-right: 0.25rem;
    cursor: pointer;
    word-break: normal;
    /*white-space: pre-warp;*/
    word-wrapl: break-word;
  }
}

/*.numb:hover {*/
/*    background: #4875E8;*/
/*}*/
</style>
